@function adjusted-color($base-color, $percentage) {
    $hue: hue($base-color);
    $saturation: saturation($base-color);
    $lightness: lightness($base-color) + $percentage;
    $alpha: alpha($base-color);
  
    @return hsla($hue, $saturation, $lightness, $alpha);
}

:root {
    
    --cui-primary-color10: hsla(203, 100%, 10%, 1);
    --cui-primary-color1: hsla(203, 100%, 10%, 1);
    --cui-primary-color2: hsla(203, 100%, 20%, 1);
    --cui-primary-color3: hsla(203, 100%, 30%, 1);
    --cui-primary-color4: hsla(203, 100%, 40%, 1);
    --cui-primary-color5: hsla(203, 100%, 50%, 1);
    --cui-primary-color6: hsla(203, 100%, 60%, 1);
    --cui-primary-color: hsla(203, 100%, 60%, 1);
    --cui-primary-color7: hsla(203, 100%, 70%, 1);
    --cui-primary-color8: hsla(203, 100%, 80%, 1);
    --cui-primary-color9: hsla(203, 100%, 90%, 1);
    --cui-primary-color95: hsla(203, 100%, 95%, 1);
    --cui-secondary-color: hsla(155, 100%, 60%, 1);
    --cui-error-color: hsla(350, 100%, 60%, 1);
    --cui-neutral-color: hsla(203, 8%, 60%, 1);
    --cui-neutral-special-color: hsla(220, 36%, 60%, 1);
    --cui-avatar-color: hsla(203, 100%, 60%, 1);
}

$cui-primary-color: hsla(203, 100%, 60%, 1);
$cui-secondary-color: hsla(155, 100%, 60%, 1);
$cui-error-color: hsla(350, 100%, 60%, 1);
$cui-neural-color: hsla(203, 8%, 60%, 1);
$cui-neutral-special-color: hsla(220, 36%, 60%, 1);



$blue-base: $cui-primary-color;
$blue-1: var(--cui-primary-color1);
$blue-2: var(--cui-primary-color2);
$blue-3: var(--cui-primary-color3);
$blue-4: var(--cui-primary-color4);
$blue-5: var(--cui-primary-color5);
$blue-6: var(--cui-primary-color);
$blue-7: var(--cui-primary-color7);
$blue-8: var(--cui-primary-color8);
$blue-9: var(--cui-primary-color9);
$blue-95: var(--cui-primary-color95);
$blue-98: var(--cui-primary-color98);
$blue-10: var(--cui-primary-color10);


$green-base: $cui-secondary-color;
$green-1: adjusted-color($green-base, -50);
$green-2: adjusted-color($green-base, -40);
$green-3: adjusted-color($green-base, -30);
$green-4: adjusted-color($green-base, -20);
$green-5: adjusted-color($green-base, -10);
$green-6: $green-base;
$green-7: adjusted-color($green-base, 10);
$green-8: adjusted-color($green-base, 20);
$green-9: adjusted-color($green-base, 30);
$green-95: adjusted-color($green-base, 35);
$green-98: adjusted-color($green-base, 38);
$green-10: adjusted-color($green-base, 40);


$red-base: $cui-error-color;
$red-1: adjusted-color($red-base, -50);
$red-2: adjusted-color($red-base, -40);
$red-3: adjusted-color($red-base, -30);
$red-4: adjusted-color($red-base, -20);
$red-5: adjusted-color($red-base, -10);
$red-6: $red-base;
$red-7: adjusted-color($red-base, 10);
$red-8: adjusted-color($red-base, 20);
$red-9: adjusted-color($red-base, 30);
$red-10: adjusted-color($red-base, 40);


$gray-base: $cui-neural-color;
$gray-1: adjusted-color($gray-base, -50);
$gray-2: adjusted-color($gray-base, -40);
$gray-3: adjusted-color($gray-base, -30);
$gray-4: adjusted-color($gray-base, -20);
$gray-5: adjusted-color($gray-base, -10);
$gray-6: $gray-base;
$gray-7: adjusted-color($gray-base, 10);
$gray-8: adjusted-color($gray-base, 20);
$gray-9: adjusted-color($gray-base, 30);
$gray-95: adjusted-color($gray-base, 35);
$gray-98: adjusted-color($gray-base, 38);
$gray-10: adjusted-color($gray-base, 40);

$special-base: $cui-neutral-special-color;
$special-1: adjusted-color($special-base, -50);
$special-2: adjusted-color($special-base, -40);
$special-3: adjusted-color($special-base, -30);
$special-4: adjusted-color($special-base, -20);
$special-5: adjusted-color($special-base, -10);
$special-6: $special-base;
$special-7: adjusted-color($special-base, 10);
$special-8: adjusted-color($special-base, -20);
$special-9: adjusted-color($special-base, -30);
$special-10: adjusted-color($special-base, -40);
